<template lang="html">
  <div>
    <v-pageTitle vtitle="分配排班"></v-pageTitle>
    <div class="clear"></div>
    <el-row>
      <el-col>
        <el-card class="box-card">
            <el-button type="primary">管理模式</el-button>
            <el-button type="primary" plain>添加排班</el-button>
          <div class="box-card-time">
            <p>2018年9月20日</p>
            <div>
              <span>标准班次</span>
              <span>早班</span>
              <span>晚班</span>
            </div>
          </div>
          <table border="1">
            <tr>
              <th></th>
              <th>周一</th>
              <th>周二</th>
              <th>周三</th>
              <th>周四</th>
              <th>周五</th>
              <th>周六</th>
              <th>周日</th>
            </tr>
            <tr v-for="item in doctorList" class="doctor-menu">
              <td class="works">{{item.name}}</td>
              <td class="works">{{item.monday}}</td>
              <td class="works">{{item.tuesday}}</td>
              <td class="works">{{item.wednesday}}</td>
              <td class="works">{{item.thursday}}</td>
              <td class="works">{{item.friday}}</td>
              <td class="works">{{item.saturday}}</td>
              <td class="works">{{item.sunday}}</td>
            </tr>
            </table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import vPageTitle from '../common/pageTitle.vue';
export default {
  components:{
    vPageTitle
  },
  data(){
    return{
      ishow:true,
      doctorList:[
        {
          name:'里斯',
          monday:'标准班次',
          tuesday:'标准班次',
          wednesday:'标准班次',
          thursday:'标准班次',
          friday:'早班',
          saturday:'休息',
          sunday:'晚班'
        },
        {
          name:'张仲景',
          monday:'标准班次',
          tuesday:'标准班次',
          wednesday:'标准班次',
          thursday:'标准班次',
          friday:'早班',
          saturday:'休息',
          sunday:'晚班'
        },
        {
          name:'马克思',
          monday:'标准班次',
          tuesday:'标准班次',
          wednesday:'标准班次',
          thursday:'标准班次',
          friday:'早班',
          saturday:'休息',
          sunday:'晚班'
        },
        {
          name:'徐志摩',
          monday:'标准班次',
          tuesday:'标准班次',
          wednesday:'标准班次',
          thursday:'标准班次',
          friday:'早班',
          saturday:'休息',
          sunday:'晚班'
        },
        {
          name:'刘妈家',
          monday:'标准班次',
          tuesday:'标准班次',
          wednesday:'标准班次',
          thursday:'标准班次',
          friday:'标准班次',
          saturday:'休息',
          sunday:'晚班'
        }
      ]
    }
  }
}
var worksList = document.getElementsByClassName("works");
for(var i =0;i<worksList.length;i++){
  if(worksList[i].innerHTML == '休息'){
    worksList.style.color = 'red'
  }
}
</script>

<style lang="less" scoped>
@fontColor:#fff9dd;
@backColor:#009983;
@primaryColor:#a8d182;
table {
    margin: 0 auto;
    width:100%;
    border:1px solid red;
    border-collapse: collapse;
}
th,td {
    text-align: center;
    border: 1px solid @primaryColor;
    height: 50px;
}
.standard{
  background-color: rgb(134,202,165);
  color: white;
}
.morning{
  background: rgb(255,168,167);
  color: white;
}
.evening{
  background: rgb(254,194,98);
  color: white;
}
.box-card-time{
  margin-bottom: 20px;
  text-align: center;

  p{
    font-size: 30px;
    margin-bottom: 10px;
  }
  span{
    font-size: 14px;
    border: 1px solid rgb(134,202,165);
    padding: 5px 10px;
  }
  span:nth-of-type(2){
    border: 1px solid rgb(255,168,167);

  }
  span:nth-of-type(3){
    border: 1px solid rgb(254,194,98);

  }
}
</style>
